<!DOCTYPE html>
<html>
<head>
    <title>猜数字游戏</title>
    <style>
        body { font-family: Arial; text-align: center; margin-top: 50px; }
        #game { max-width: 400px; margin: 0 auto; padding: 20px; border: 1px solid #ccc; border-radius: 10px; }
        button { padding: 10px 20px; background: #4CAF50; color: white; border: none; cursor: pointer; }
    </style>
</head>
<body>
    <div id="game">
        <h1>猜数字游戏</h1>
        <p>我已经想好了1-100之间的一个数字</p>
        <input type="number" id="guess" min="1" max="100" placeholder="输入你的猜测">
        <button onclick="checkGuess()">提交</button>
        <p id="message"></p>
        <p id="attempts">尝试次数: 0</p>
    </div>

    <script>
        const secret = Math.floor(Math.random() * 100) + 1;
        let attempts = 0;
        
        function checkGuess() {
            const input = document.getElementById("guess");
            const message = document.getElementById("message");
            const attemptCounter = document.getElementById("attempts");
            
            const guess = parseInt(input.value);
            
            if (isNaN(guess) || guess < 1 || guess > 100) {
                message.textContent = "请输入1-100之间的有效数字！";
                return;
            }
            
            attempts++;
            attemptCounter.textContent = `尝试次数: ${attempts}`;
            
            if (guess < secret) {
                message.textContent = "太小了！再试一次";
            } else if (guess > secret) {
                message.textContent = "太大了！再试一次";
            } else {
                message.innerHTML = `<strong>恭喜！你猜对了数字 ${secret}！</strong>`;
                input.disabled = true;
            }
            
            input.value = "";
            input.focus();
        }
    </script>
</body>
</html>